<template>
  <div class="login_container">
    <!--注册区域——透明度style="opacity:80%;"-->
    <div class="login_box" >
      <!--头像-->
      <div class="avatar_box">
        <el-popover
          placement="top-start"
          title="租赁平台"
          width="200"
          trigger="hover"
          content="点我？？无需注册查看出租商品">
          <img slot="reference" src="../assets/img/login_head.jpg" class="img" @click="pushMain">
        </el-popover>
      </div>
      <!--注册表单-->
      <div>
        <div><el-button type="text" @click="pushLogin" style="padding-top: 10px;font-size: 20px;margin-left: 20px">
          <<&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  用户注册:
        </el-button></div>
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium"
                 label-width="100px"
                 class="login_form">

          <el-col :span="24">
            <el-form-item label="上传" required>
            <el-upload
              ref="avatar"
              action="string"
              :http-request="uploadImg"
              :on-remove="handleRemove"
              list-type="picture">
            <el-button size="small" type="primary">点击上传头像</el-button>
              <div slot="tip" v-if="uploadMessage" class="el-upload__tip" style="color: #1a1a1a">只能上传jpg/png文件，且不超过500kb</div>
            <div slot="tip">
            <img v-if="hidden" :src=formData.avatar alt="" style="width: 80px;height: 80px">
            </div>
            </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formData.username" placeholder="请输入用户名" :maxlength="11" show-word-limit
                        clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="formData.nickname" placeholder="请输入昵称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="密码" prop="password">
              <el-input v-model="formData.password" type="password" placeholder="请输入密码" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formData.sex" size="medium">
                <el-radio v-for="(item, index) in selectSex" :key="index" :label="item.value"
                          :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生日" prop="birth">
              <el-date-picker v-model="formData.birth" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请选择生日" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item size="medium" style="margin-left: 100px">
              <el-button @click="resetForm">重置</el-button>
              <el-button type="primary" style="margin-top: 12px;" @click="submitForm">注册</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Enroll',
    // 表单数据
    data() {
      return {
        uploadMessage:true,
        hidden:false,
        formData: {
          avatar:undefined,
          username: undefined,
          nickname: undefined,
          sex: 0,
          birth: null,
          password: undefined,
          enabled:1,
        },
        rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          nickname: [{
            required: true,
            message: '请输入昵称',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '性别不能为空',
            trigger: 'change'
          }],
          birth: [{
            required: true,
            message: '请选择生日',
            trigger: 'change'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
        },
        selectSex: [{
          "label": "男",
          "value": 0
        }, {
          "label": "女",
          "value": 1
        }],
      }
    },
    // 方法
    methods: {
      pushLogin(){
        this.$router.push('/');
      },
      pushMain(){
        this.$router.push('/main');
      },
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
          let url = '/register?avatar='+this.formData.avatar +'&&enabled='+1+'&&birth='+this.formData.birth +'&&nickname='+this.formData.nickname+'&&username='+this.formData.username +'&&sex='+this.formData.sex+'&&password='+this.formData.password;
            this.postRequest(url).then(resp=>{
              if (resp){
                this.$router.push('/');
                this.$notify.success({ title: '成功', message: resp.message });
              }
            })
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
      //上传图片
      uploadImg(item) {
        this.uploadMessage=false
        let formData = new FormData()
        formData.append('file', item.file)
        this.hidden=false;
        this.postRequest('/good/data/uploadImgFile',formData).then(resp => {
          if (resp) {
            console.log(resp);
            this.formData.avatar=resp.obj;
          }
        })
      },
      //删除图片
      handleRemove() {
        this.uploadMessage=true
        let formData = new FormData()
        formData.append('file', this.formData.avatar)
        this.postRequest('/good/data/deleteImgFile',formData).then(resp => {
          if (resp) {
            console.log(resp);
          }
        })
      },
    }
  }
</script>

<!--scoped表示当前的样式只在该页面有效，不添加scope则为全局样式-->
<style scoped>
  .login_container {
    height: 100%;
    background: url("../assets/img/login-bg.jpg");
    background-size: 100%;
  }

  .login_box {
    border-radius: 5px;
    width: 500px;
    height: 600px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .avatar_box{
      width: 80px;
      height: 80px;
      border: 1px solid #EEEEEE;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin:-30px auto;
      background-color: #FFFFFF;
    }

  .img{
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #EEEEEE;
    }

  .login_form{
      position: absolute;
      bottom: 0px;
      width: 100%;
      padding: 0px 20px;
      box-sizing: border-box;

    }

</style>
